// * 类组件：setState()=> 父类Component
// * 作用：1. 修改state的数据 2. 刷新页面
// * 特点：异步的（共同点）
// * 语法：
// * 1. setState({key:newVal}) =》多次执行，只执行最后一次
// * 2. setState(func:回调) =》多次执行 =》累加（全部执行）
import React, { Component } from 'react'
class Index extends Component {
    state = {
        count: 0
    }
    // 对象语法
    hObj = () => {
        this.setState({
            count: this.state.count + 1
        }, () => {
            console.log('最新的值', this.state.count)
        })
        console.log('上一次的值', this.state.count)
        this.setState({
            count: this.state.count + 2
        }, () => {
            console.log('最新的值2：', this.state.count)
        })

        this.setState({
            count: this.state.count + 3
        }, () => {
            console.log('最新的值3：', this.state.count)
        })
    }
    // 函数语法
    hFn = () => {
        this.setState((state, props) => {
            return {
                count: state.count + 1
            }
        }, () => {
            console.log('最新的值', this.state.count)
        })
        console.log('函数语法', this.state.count)
        // 多次执行
        this.setState((state, props) => {
            return {
                count: state.count + 2
            }
        }, () => {
            console.log('最新的值2', this.state.count)
        })
        this.setState((state, props) => {
            return {
                count: state.count + 3
            }
        }, () => {
            console.log('最新的值3', this.state.count)
        })
    }
    render() {
        return (
            <div>
                <h1>setState高级</h1>
                <p>{this.state.count}</p>
                <button onClick={this.hObj}>对象语法ADD</button>
                <button onClick={this.hFn}>函数语法ADD</button>

            </div>
        )
    }
}

export default Index